/**
 * @description 首页推荐列表
 * @create_date 2022-06-15
 * @author QiuZiYing
 * */
import { Image, Swiper, SwiperItem, Text, View } from "@tarojs/components";
import React from "react";
import { AtIcon } from "taro-ui";
import { RecoData } from "../models";
import "../RecoFoodSwiper.scss";

const levelMaps = new Map([
  ["0","简单"],
  ["1","一般"],
  ["2","困难"],
  ["3","复杂"]
])


export interface RecoFoodSwiperProps {
  data:RecoData[];
  onClick?:(data:RecoData) => void;
}

export const RecoFoodSwiper = ({
  data,
  onClick
}:RecoFoodSwiperProps) => {

  const handleOnClick = (item:RecoData) => {
    onClick?.(item)
  }

  return (
    <>
      <Swiper className='reco-food-list' circular displayMultipleItems={1.5}>
        {
          data.map((item)=>(
            <SwiperItem key={item.id} onClick={()=> handleOnClick(item)}>
              <View className='reco-food-item'>
              <View className='mask-1' />
                <Image
                  mode='aspectFill'
                  lazyLoad
                  className='reco-food-image'
                  src={item.cover_image}
                />
                <View className='reco-food-text'>
                  <Text className='food-name'>{item.name}</Text>
                  <View className='food-info'>
                    <View className='flex cost'>
                      <AtIcon prefixClass='icon' value='naifen' size='21' />
                      <Text>{Math.floor(Number(item.cost) / 60)}分钟</Text>
                    </View>
                    <View className='flex level'>
                      <AtIcon prefixClass='icon' value='cookie' size='21' />
                      <Text>{levelMaps.get(item.level)}</Text>
                    </View>
                  </View>
                </View>
              </View>
            </SwiperItem>
          ))
        }
      </Swiper>
    </>
  )
}
